<template>
	<view class="content" style="background: #eee;">
		<view class="header">
			<image :src="img" mode="widthFix"></image>
			<view class="text">{{title}}</view>
			<view class="row">
				<view class="key">活动时间：</view>
				<view class="value">{{dateTimeString}}</view>
			</view>
		</view>
		<view class="infomation">
			<tabbar class="tabbar" :dataArray="dataArray" :checkedIndex="checkedIndex"
				@handleIndexChange="checkedChange"></tabbar>
		</view>
		<view class="detail" id="index0">
			<secTitle class="title" :title="'展览前言'" :color="'#B9AC90'" :showMore="false"></secTitle>
			<view class="text">
				<text>{{infomation}}</text>
			</view>
		</view>
		<view class="detail" id="index1">
			<secTitle class="title" :title="'展览详情'" :color="'#B9AC90'" :showMore="false"></secTitle>
			<view class="text">
				<text>{{infomation}}</text>
			</view>
		</view>
		<view class="detail" id="index2">
			<secTitle class="title" :title="'藏品展示'" :color="'#B9AC90'" :showMore="false"></secTitle>
			<image :src="imgList[0]" mode="widthFix"></image>
			<image :src="imgList[1]" mode="widthFix"></image>
			<image :src="imgList[2]" mode="widthFix"></image>
			<image :src="imgList[3]" mode="widthFix"></image>
			<image :src="imgList[4]" mode="widthFix"></image>
			<image :src="imgList[5]" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import secTitle from '../customer/secTitle.vue'
	import tabbar from '../customer/tabbar.vue'
	export default {
		components: {
			secTitle,
			tabbar,
		},
		props: {
			id: String
		},
		data() {
			return {
				img: "../../static/introduction1.png",
				title: "《天下盐城》",

				dateTimeString: "2021年7月19日 18点01分",

				checkedIndex: 0,
				dataArray: ["展览前言", "展览详情", "藏品展示", ],

				infomation: "以“依淮傍海 淮夷生息——盐城的文脉渊源”“煮海之饶 以盐立城——秦汉魏南北朝时期的盐城”“ 赋半天下 人文璀璨——隋唐宋元明清时期的盐城”“沧桑巨变 历史新篇——近现代盐城”四个单元，从盐城数千年来的海盐文化、移民文化、农垦文化、红色文化等，体现盐城依淮傍海、南北交会的地理环境，煮海为盐、经济繁荣、文化多元的经济社会形态，表现以盐立城、赋半天下的时代烙印。",

				imgList: [
					"../../static/introduction1.png",
					"../../static/introduction2.png",
					"../../static/introduction3.png",
					"../../static/introduction4.png",
					"../../static/introduction5.png",
					"../../static/introduction6.jpg",
				],
			}
		},
		methods: {
			checkedChange(index) {
				let scroll = 0;
				uni.createSelectorQuery().select("#index" + index).boundingClientRect(data => { //目标节点
					scroll = data.top
				}).exec();
				uni.createSelectorQuery().select(".content").boundingClientRect(data => { //目标节点
					scroll -= data.top
				}).exec();
				uni.pageScrollTo({
					duration:0,
					scrollTop:scroll
				})
			}
		}
	}
</script>

<style>
	.content {
		/* padding: 20rpx; */
		/* width: calc(100% - 40rpx); */
		width: 100%;
		height: auto;
	}

	.header {
		background: #fff;
		padding-bottom: 40rpx;
	}

	.header image {
		margin: 20rpx;
		width: calc(100% - 40rpx);
		border-radius: 10rpx;
		height: auto;
	}

	.header .text {
		font-weight: bolder;
		height: 80rpx;
		line-height: 40rpx;
		padding: 0 20rpx;
		text-align: left;
		width: calc(100% - 40rpx);
		/* max-width: 400rpx; */
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.infomation {
		background: #fff;
		margin-top: 20rpx;
		padding: 20rpx 0;
	}

	.tabbar {
		/* padding: 0 40rpx; */
		border-bottom: #ddd solid 2rpx;
	}

	.title {
		/* padding: 20rpx; */
	}

	.row {
		width: calc(100% - 40rpx);
		height: auto;
		display: flex;
		padding: 15rpx 20rpx 0 20rpx;
	}

	.key {
		width: 120rpx;
		height: 32rpx;
		font-size: 20rpx;
		line-height: 32rpx;
		color: #333;
	}

	.value {
		width: auto;
		height: 32rpx;
		font-size: 20rpx;
		color: #666;
		line-height: 32rpx;
	}

	.detail {
		padding: 20rpx 0;
		background: #fff;
	}

	.detail .text {
		margin: 0 20rpx 20rpx 20rpx;
		text-align: justify;
		text-indent: 2em;
		color: #666;
		font-size: 28rpx;
	}

	.detail image {
		margin: 10rpx 20rpx;
		width: calc(100% - 40rpx);
	}
</style>
